<script setup lang="ts">
import { Component, VNode, computed, useSlots } from "vue";

defineOptions({
  name: "SContainer",
});

interface Prop {
  direction?: string;
}

const props = defineProps<Prop>();

const slot = useSlots();

const isVertical = computed(() => {
  if (slot && slot.default) {
    return slot.default().some((v: VNode) => {
      const tab = (v.type as Component).name;
      return tab === "SHeader" || tab === "SFooter";
    });
  } else {
    return props.direction === "vertical";
  }
});
</script>

<template>
  <section class="S-container" :class="{ 'is-vertical': isVertical }">
    <slot />
  </section>
</template>
